<template>
  <!-- 搜索卡片 -->
  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="日志搜索">
        <el-input placeholder="输入操作人员姓名" style="width: 220px;"
                  v-model="searchLogData.keywords"
                  @keydown.enter="loadLogList"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadLogList">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 数据表格卡片 -->
  <el-card style="margin: 20px;">
    <el-table :data="logListData" v-loading="loading">
      <el-table-column label="ID" prop="id" align="center"></el-table-column>
      <el-table-column label="模块" prop="model" align="center"></el-table-column>
      <el-table-column label="行为" prop="act" align="center"></el-table-column>
      <el-table-column label="对象ID" prop="objectId" align="center"></el-table-column>
      <el-table-column label="操作地址" prop="uri" align="center"></el-table-column>
      <el-table-column label="ip" prop="ip" align="center"></el-table-column>
      <el-table-column label="操作人员" prop="managerName" align="center"></el-table-column>
      <el-table-column label="操作时间" prop="createTime" align="center"></el-table-column>
    </el-table>
    <!--  分页-->
    <el-pagination
        background
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalItems"
        @current-change="handleCurrentChange" style="margin-top: 20px;"/>
  </el-card>
</template>

<script setup>
//日志列表数据
import {onMounted, ref} from "vue";
import axios from "@/api/axios";
//定义加载动画(true为加载,false为加载完成停止加载)
const loading = ref(true)

//分页数据
const currentPage = ref(1);//当前页码
const pageSize = ref(15);//每页显示的条数
const totalItems = ref(0);//数据总数

//监听跳转页码的事件
const handleCurrentChange = (val) => {
  currentPage.value = val;
  loadLogList();
}

//列表数据
const logListData = ref([])

//搜索数据
const searchLogData = ref({})
onMounted(() => {
  loadLogList();
})

//加载列表
const loadLogList = () => {
  loading.value = true;
  searchLogData.value.page = currentPage.value
  searchLogData.value.pageNum = pageSize.value
  axios.get("/v1/log/list", {serviceName: 'logService', params: searchLogData.value}).then((response) => {
    if (response.data.code === 200) {
      currentPage.value = response.data.data.current;
      totalItems.value = response.data.data.total;
      logListData.value = response.data.data.records;
    }
  })
  loading.value = false;
}

//重置搜索方法
const resetSearch = () => {
  searchLogData.value = {};
  loadLogList();
}
</script>

<style scoped>
</style>